<template>
  <div class="cesiumContainer" ref="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from "cesium";
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import GUI from "lil-gui";
//相机跟随
const cesiumContainer = ref(null);
let model = reactive({});
let scene = reactive({});
let viewer = reactive({});
let billboards = reactive({});
const operation = {
  value: "",
  selectOptions: {
    // 基本添加: "addBillboard",
  },
};
// let currentInstance = getCurrentInstance();
let gui = new GUI();
gui
  .add(operation, "value", operation.selectOptions)
  .name("相机跟随")
  .onChange((e) => {
    console.log("相机跟随");
    scene.primitives.removeAll();
  });

// 相当于密钥，申请使用下边链接中的数据时需要用到
// Cesium.Ion.defaultAccessToken =
//   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyOTQ0YTExZS02N2Y4LTQ2OTMtOWQ4NS1mNzE3ZWMwYTNmNmEiLCJpZCI6NDM1OCwiaWF0IjoxNjI4MTQzMjE1fQ.csECCT352LHVhak2sJlWYXw_gr7U-AqdQ9UMvtfOeg8";

class CarmeraFollow {
  constructor(viewer) {
    this.viewer = viewer;
    this.dataSource = null;
    this.pathData = this.createPath();
    this.drawPath();
  }
  createPath() {
    let path = [];
    for (let i = 0; i <50; i+=5) {
      path.push([Number(119 + i*0.1),36+i*Math.sign(20), 10]);
    }
    return path;
  }
  drawPath() { 
    // console.log("路径",this.pathData.flat());
    this.dataSource = new Cesium.CustomDataSource('myData'); 
     this.viewer.entities.add({ 
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.pathData.flat()),
          width: 2,
          material: Cesium.Color.RED,
          clampToGround: true,
        },
      });
      // this.viewer.dataSources.add(this.dataSource); 
    //  viewer.zoomTo(dataSource);  

    //创建管理轨迹的对象，包括可以设置走的时候按什么差值计算运行动画
    let property = new Cesium.SampledPositionProperty();
    let startDate = new Date();
    let stopTime = null;
    let startTime = startDate.getTime(); 
    this.pathData.forEach((item, index) => { 
      let currentTime = new Date(startTime + index * 30000); 
      stopTime = currentTime; 
      // console.log("时间戳吗",stopTime);
      // console.log("经纬度",currentTime,item[0], item[1], item[2]);
      let position = Cesium.Cartesian3.fromDegrees(item[0], item[1], item[2]);
      property.addSample(Cesium.JulianDate.fromDate(currentTime), position);
    });
 

    //主要设置动画运行的时候中间需要插入多少个点
    property.setInterpolationOptions({
      // interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, //插值算法
      interpolationAlgorithm: Cesium.LagrangePolynomialApproximation, //插值算法
      interpolationDegree:1, // 插值阶数
    });
  
    console.log("property",property);
    
    this.viewer.entities.add({
      availbility: new Cesium.TimeInterval({
          start: Cesium.JulianDate.fromDate(startDate),
          stop: Cesium.JulianDate.fromDate(stopTime),
        }),
        position: property,
        orientation: new Cesium.VelocityOrientationProperty(property), //设置模型的朝向
        model: {
        uri: "/public/models/CesiumAir/Cesium_Air.glb",
          minimumPixelSize: 64,
        },
        path:{
          leadTime:0,
          resolution:1,
          material: Cesium.Color.BLUE ,
          //new Cesium.PolylineGlowMaterialProperty({glowPower:.1,color:Cesium.Color.GREEN}),
          width:10,
        }
    })


    this.viewer.clock.currentTime=Cesium.JulianDate.fromDate(startDate);
    this.viewer.clock.stopTime==Cesium.JulianDate.fromDate(stopTime);
    this.viewer.clock.lockRange=Cesium.ClockRange.LOOP_STOP;
    this.viewer.shouldAnimate=true;
   

    // this.viewer.dataSources.add(this.dataSource); 
    this.viewer.zoomTo(this.viewer.entities);
  }

  //添加模型实体
  drawEntity() { 
    //添加实体
    this.viewer.entities.add({
      availbility: new Cesium.TimeInterval({
        start: Cesium.JulianDate.fromDate(startDate),
        stop: Cesium.JulianDate.fromDate(new Date(stopTime)),
      }),
      position: property,
      orientation: new Cesium.VelocityOrientationProperty(property), //设置模型的朝向
      model: {
        uri: "/public/models/CesiumAir/CesiumAir.glb",
        minimumPixelSize: 64,
      },
      path: {
        leadTime: 0,
        resolution: 1,
        material: Cesium.Color.BLUE,
        width: 10,
      },
    });
  }
}

onMounted(async () => {
  viewer = new Cesium.Viewer(cesiumContainer.value, {
    baseLayerPicker: false, // 如果设置为false，将不会创建右上角图层按钮。
    fullscreenButton: false, // 如果设置为false，将不会创建右下角全屏按钮。
    vrButton: false, // 如果设置为false，将不会创建VR应用场景
    geocoder: false, // 如果设置为false，将不会创建右上角查询(放大镜)按钮。
    homeButton: false, // 如果设置为false，将不会创建右上角主页(房子)按钮。
    infoBox: false, // 是否显示点击要素之后显示的信息,cesium中的沙盒开关
    sceneModePicker: false, // 如果设置为false，将不会创建右上角投影方式控件(显示二三维切换按钮)。
    selectionIndicator: false, // 获取当选定实体更改时引发的事件。
    navigationHelpButton: false, // 如果设置为false，则不会创建右上角帮助(问号)按钮。
    navigationInstructionsInitiallyVisible: false, // 如果帮助说明最初应该是可见的，则为true；如果直到用户明确单击该按钮，则不显示该说明，否则为false。
    timeline: true, // 如果设置为false，则不会创建正下方时间轴小部件。
    scene3DOnly: true, // 为 true 时，每个几何实例将仅以3D渲染以节省GPU内存。
    animation: true, // 如果设置为false，将不会创建左下角动画小部件。
    shouldAnimate: false, // 默认true ，否则为 false 。此选项优先于设置 Viewer＃clockViewModel 。
    // ps. Viewer＃clockViewModel 是用于控制当前时间的时钟视图模型。我们这里用不到时钟，就把shouldAnimate设为false
    sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
    requestRenderMode: false, // 启用请求渲染模式，不需要渲染，节约资源吧
    fullscreenElement: document.body, // 全屏时渲染的HTML元素 暂时没发现用处，虽然我关闭了全屏按钮，但是键盘按F11 浏览器也还是会进入全屏
    shadows: true,
  });

  //获取场景对象
  scene = viewer.scene;

  scene.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(119, 40, 1000000),
    orientation: {
      heading: Cesium.Math.toRadians(0),
      pitch: Cesium.Math.toRadians(-90),
      roll: 0,
    },
  });
 

  //添加路径
  new CarmeraFollow(viewer);

  const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
  handler.setInputAction((e) => {
    const pick = scene.pick(e.endPosition);
    if (
      Cesium.defined(pick) &&
      Cesium.defined(pick.node) &&
      Cesium.defined(pick.mesh)
    ) {
      console.log(`node:${pick.node.name},mesh:${pick.mesh.name}`);
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
});
</script> 
<style scoped>
.cesiumContainer {
  width: 100%;
  height: 100vh;
}
</style>
